<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram 7-47</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="400" height="340"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style setup ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // --- Coordinates ---
        const termAX = 60, termAY = 60;
        const termBX = 60, termBY = 260;

        const c1x = 140, c2x = 240;
        const topY = 60;
        const c12_topPlateY = 90;
        const c12_bottomPlateY = 100;
        const middleY = 150;

        const c3x = (c1x + c2x) / 2; // 190
        const c3_topPlateY = 190;
        const c3_bottomPlateY = 200;
        const bottomY = 260;

        const plateWidth = 40;

        // --- Draw Wires ---
        ctx.beginPath();
        // Top part (A to C1/C2)
        ctx.moveTo(termAX, topY);
        ctx.lineTo(c1x, topY);
        ctx.moveTo(c1x, topY);
        ctx.lineTo(c2x, topY);
        ctx.moveTo(c1x, topY);
        ctx.lineTo(c1x, c12_topPlateY); // Drop to C1
        ctx.moveTo(c2x, topY);
        ctx.lineTo(c2x, c12_topPlateY); // Drop to C2

        // Middle part (connecting C1 and C2)
        ctx.moveTo(c1x, c12_bottomPlateY);
        ctx.lineTo(c1x, middleY);
        ctx.moveTo(c2x, c12_bottomPlateY);
        ctx.lineTo(c2x, middleY);
        ctx.moveTo(c1x, middleY);
        ctx.lineTo(c2x, middleY); // Connects the bottom leads

        // Bottom part (from middle to C3 to B)
        ctx.moveTo(c3x, middleY); // Center of the middle wire
        ctx.lineTo(c3x, c3_topPlateY); // Down to C3
        ctx.moveTo(c3x, c3_bottomPlateY);
        ctx.lineTo(c3x, bottomY); // Drop from C3
        ctx.moveTo(c3x, bottomY);
        ctx.lineTo(termBX, bottomY); // To B
        ctx.stroke();

        // --- Draw Components (Capacitor plates and Terminals) ---
        ctx.beginPath();
        // C1 plates
        ctx.moveTo(c1x - plateWidth/2, c12_topPlateY);
        ctx.lineTo(c1x + plateWidth/2, c12_topPlateY);
        ctx.moveTo(c1x - plateWidth/2, c12_bottomPlateY);
        ctx.lineTo(c1x + plateWidth/2, c12_bottomPlateY);
        
        // C2 plates
        ctx.moveTo(c2x - plateWidth/2, c12_topPlateY);
        ctx.lineTo(c2x + plateWidth/2, c12_topPlateY);
        ctx.moveTo(c2x - plateWidth/2, c12_bottomPlateY);
        ctx.lineTo(c2x + plateWidth/2, c12_bottomPlateY);

        // C3 plates
        ctx.moveTo(c3x - plateWidth/2, c3_topPlateY);
        ctx.lineTo(c3x + plateWidth/2, c3_topPlateY);
        ctx.moveTo(c3x - plateWidth/2, c3_bottomPlateY);
        ctx.lineTo(c3x + plateWidth/2, c3_bottomPlateY);
        ctx.stroke();

        // Terminals A and B
        ctx.beginPath();
        ctx.arc(termAX, termAY, 5, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.arc(termBX, termBY, 5, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw Labels ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Terminal labels
        ctx.font = '24px serif';
        ctx.fillText('A', termAX - 25, termAY);
        ctx.fillText('B', termBX - 25, termBY);

        // Capacitor labels (using Unicode subscripts)
        ctx.font = 'italic 22px serif';
        ctx.fillText('C₁', 105, 95);
        ctx.fillText('C₂', 190, 95);
        ctx.fillText('C₃', 150, 195);

        // Caption
        ctx.font = '24px "KaiTi", "STKaiti", serif';
        ctx.fillText('习题 7-47 图', 200, 310);
    </script>
</body>
</html>